<template>
  <div>
    <div class="outers">
      <div class="headers">
        <h1>工艺流程信息</h1>
      </div>

      <div class="outer">
        <el-form
          :inline="true"
          ref="form"
          type="text"
          :model="form"
          :rules="rules"
          size="medium"
          label-width="150px"
          style="margin: 20px 80px 0 40px"
        >
          <el-form-item label="工艺流程名称:">
            <el-input
              @keyup.enter.native="handleQuery"
              ref="inpuh"
              v-model="form.processName"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="工艺流程编号:">
            <el-input
              v-model="form.processNo"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-form>

        <el-form>
          <el-form-item
            label="备注:"
            prop="form.remark"
            style="margin: 20px 10px 0 80px"
          >
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="form.remark"
              style="width: 400px"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="bottom">
      <div><h1>加工工序</h1></div>
      <div class="adds">
        <el-form>
          <el-button type="primary" @click="tianjia" style="margin-left: 20px"
            >添加</el-button
          >
          <!-- dialogTableVisible = true" -->

          <!-- 添加弹出框 -->
          <el-dialog title="添加工序" :visible.sync="dialogTableVisible">
            <!-- 搜索框 -->
            <el-form style="width: 260px; margin-bottom: 30px; float: right">
              <el-input
                placeholder="请输入工序名称"
                v-model="queryParams.procedureName"
                class="input-with-select"
                @keyup.enter.native="handleQuery"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="handleQuery"
                ></el-button>
              </el-input>
            </el-form>

            <el-form ref="form" :model="form" label-width="80px">
              <!-- 已选 几项 -->
              <div style="font-size: 20px">
                已勾选<span>{{ valLength }}</span
                >项
              </div>

              <el-table
                border
                ref="multipleTable"
                :data="listNum"
                style="width: 100%"
                @selection-change="SelectionChange"
              >
                <el-table-column type="selection" width="55" align="center" />

                <el-table-column label="序号" prop="id" width="120" />

                <el-table-column
                  prop="procedureNo"
                  label="工序编号"
                  show-overflow-tooltip
                >
                </el-table-column>

                <el-table-column
                  prop="procedureName"
                  label="工序名称"
                  show-overflow-tooltip
                >
                </el-table-column>

                <el-table-column
                  prop="procedureClassifyName"
                  label="工序分类"
                  show-overflow-tooltip
                >
                </el-table-column>
              </el-table>
            </el-form>

            <div class="block">
              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="tianjia"
              />
            </div>

            <div style="margin-top: 20px; text-align: center">
              <el-form-item>
                <el-button @click="dialogTableVisible = false">取消</el-button>
                <el-button type="primary" @click="insert">确定</el-button>
              </el-form-item>
            </div>
          </el-dialog>
        </el-form>

        <div style="margin-left: 30px">
          <el-popover placement="top" width="160" v-model="visible">
            <p>确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="remove"
                >确定</el-button
              >
            </div>
            <el-button
              slot="reference"
              style="background: #ed7b2f; color: white"
              >删除</el-button
            >
          </el-popover>
        </div>
      </div>

      <!-- 下面表格 -->
      <div class="tables">
        <el-form>
          <el-table
            border
            ref="multipleTable"
            :data="form.rel"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="序号" prop="id" width="120">
              <!-- <template slot-scope="scope">{{ scope.listNum }}</template> -->
            </el-table-column>
            <el-table-column prop="sort" label="加工工序" width="120">
            </el-table-column>
            <el-table-column
              prop="procedureNo"
              label="工序编号"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="procedureName"
              label="工序名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="procedureClassifyName"
              label="工序分类"
              show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column prop="handle" label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="up(scope.$index)"
                  >上移</el-button
                >
                <el-button size="mini" type="text" @click="down(scope.$index)"
                  >下移</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "@/assets/styles/ruoyi.scss";
import Pager from "../../../components/Pagination/index.vue";
import { listProcedure } from "@/api/base/procedure";
import {
  listProcess,
  getProcess,
  delProcess,
  addProcess,
  updateProcess,
} from "@/api/base/process";

export default {
  components: { Pager },

  data() {
    return {
      total: [],
      // 已勾选条数
      valLength: [],

      //加工工序查看-编辑勾选内容
      updateList: [],
      updateObj: {},
      arrayVal: [],
      tablesList: [],
      checkList: [],

      pufaCertificateNo: [],
      rules: {
        processName: [
          { required: true, message: "工艺流程名称不能为空", trigger: "blur" },
        ],
      },

      // 遮罩层
      // loading: true,
      // // 选中数组
      ids: [],
      list: [],

      // // 非单个禁用
      // single: true,
      // // 非多个禁用
      // multiple: true,
      // // 显示搜索条件
      // showSearch: true,
      // // 总条数

      // roleList: [],
      // // 弹出层标题
      // title: "",
      // // 是否显示弹出层
      // form: {
      //   name: "",
      //   region: "",
      //   date1: "",
      //   date2: "",
      //   delivery: false,
      //   type: [],
      //   resource: "",
      //   desc: "",
      // },
      form: {},
      listNum: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        procedureName: null,
      },

      ides: [],

      processList: [],
      input3: "",
      visible: false,
      input: "",
      textarea: "",

      dialogTableVisible: false,
      dialogFormVisible: false,

      multipleSelection: [],
    };
  },
  created() {
    console.log("query", this.$route.query.id);
    var s = {
      id: 1,
      processNo: "",
      processName: "",
      processQuantity: null,
      technologicalProcess: null,
      rel: [],
      createBy: "",
      createRole: "",
      createTime: "",
      remark: "",
    };
    getProcess(this.$route.query.id).then((response) => {
      this.form = response.data;
      console.log("form", this.form);
    });
    listProcedure().then((res) => {
      this.listNum = res.rows;
    });
  },

  methods: {
    // 表单重置
    reset() {
      (this.form = {
        processName: null,
      }),
        (this.tablesList = null);
    },

    // 删除
    remove() {
      // console.log("tableVal", this.tableVal);
      let a = this.form.rel.filter((item) => {
        if (this.tableVal.includes(item) == false) return item;
      });
      for (let i = 0; i < a.length; i++) {
        a[i].sort = i + 1;
      }
      this.form.rel = a;
      console.log("aaa", a);
      this.visible = false;
    },

    // 弹框查询
    handleQuery() {
      this.queryParams.procedureName = this.queryParams.procedureName;
      this.tianjia();
    },
    // total 条数方法
    getTianjia() {
      this.loading = true;
      this.dialogTableVisible = true;
      listProcedure(this.queryParams).then((res) => {
        this.total = res.total;
      });
      this.loading = false;
      console.log("total", this.total);
    },
    // 添加
    tianjia() {
      listProcedure(this.queryParams).then((res) => {
        this.listNum = [];
        for (let i = 0; i < res.rows.length; i++) {
          let item = res.rows[i];

          this.listNum.push(item);
        }
        this.loading = false;
      });
      this.getTianjia();
    },
    // 上移
    up(w) {
      if (w === 0) {
        this.$message({
          message: "已经是列表中第一条！",
          type: "warning",
        });
      } else {
        let prev = this.form.rel[w - 1];
        this.form.rel[w - 1] = this.form.rel[w];

        this.$set(this.form.rel, w, prev);
        for (let i = 0; i < this.form.rel.length; i++) {
          this.form.rel[i].sort = i + 1;
        }
        console.log(w);

        console.log("shang", this.form.rel);
      }
    },

    down(w) {
      if (w === this.form.rel.length - 1) {
        this.$message({
          message: "已经是列表中最后一条！",
          type: "warning",
        });
      } else {
        let prev = this.form.rel[w + 1];
        this.form.rel[w + 1] = this.form.rel[w];

        this.$set(this.form.rel, w, prev);
        for (let i = 0; i < this.form.rel.length; i++) {
          this.form.rel[i].sort = i + 1;
        }
        console.log(w);

        console.log("shang", this.form.rel);
      }
    },

    // sub() {
    //   let a = this.tablesList.filter((item) => {
    //     if (this.tableVal.includes(item) == false) return item;
    //   });
    //   for (let i = 0; i < a.length; i++) {
    //     a[i].sort = i + 1;
    //   }
    //   this.tablesList = a;
    //   this.visible = false;
    // },

    // 弹框添加
    insert() {
      let that = this;

      that.form.rel.push.apply(that.form.rel, this.arrayVal);
      console.log("that.tablesList", that.form.rel);

      let arr = this.insertSort(this.form.rel);
      console.log("arr", arr);
      this.form.rel = arr;
      this.arrayVal = [];

      this.dialogTableVisible = false;
    },

    insertSort(list) {
      console.log("list", list);

      var a = [];
      for (let i = 0; i < list.length; i++) {
        list[i].sort = i + 1;
        a.push(list[i]);
        console.log("aaaaaa", a);
      }
      return a;
    },
    // 取消按钮并跳转
    cancel() {
      this.reset();
      const obj = {
        path: "/base/process",
        query: { t: Date.now(), pageNum: this.$route.query.pageNum },
      };
      this.$tab.closeOpenPage(obj);
    },

    // 弹框的添加复选框
    SelectionChange(val) {
      this.valLength = val.length;
      this.arrayVal = [];
      this.arrayVal.push.apply(this.arrayVal, val);
      console.log("val", this.valLength);
    },
    // form 确定
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log("f", this.form);
          this.updateObj = this.form;
          this.updateObj.rel = this.updateList;
          updateProcess(this.updateObj).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.open = true;
            // this.$router.push({ path: "/base/process" });
          });

          const obj = {
            path: "/base/process",
            query: { t: Date.now(), pageNum: this.$route.query.pageNum },
          };
          this.$tab.closeOpenPage(obj);
        }
      });
    },
    // form复选框
    handleSelectionChange(val) {
      this.tableVal = val;

      this.updateList = val;

      // //新增组装form表单
      // this.form.rel = [];
      // for (let i = 0; i < val.length; i++) {
      //   let process = {};
      //   (process.procedureNo = val[i].procedureNo),
      //     (process.sort = val[i].sort),
      //     // console.log("process", process);
      //     this.form.rel.push(process);
      // }
    },
    // 编辑 隐藏 显示

    // handleUpdate() {
    //   this.ids = selection.map((item) => item.id);
    //   this.ids.push(this.listNum);

    //   listProcedure().then((res) => {
    //     let that = this;
    //     for (let i = 0; i < res.rows.length; i++) {
    //       console.log(res.rows[i].id);
    //       // res.rows.id = this.queryParams.id
    //       // this.handleUpdate()
    //       this.listNum.push(that.multipleSelection);
    //     }
    //   });
    // },

    // handleSelectionChange(val) {
    //   let that = this;
    //   this.multipleSelection = val;

    //   this.listNum.push(that.multipleSelection);
    // },
  },
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  margin-top: 16px;
  text-align: center;
}
.outers .headers {
  width: 100%;
  height: 50px;

  border-bottom: 1px solid gainsboro;
  h1 {
    margin-left: 50px;
    padding-top: 10px;
  }
}

.bottom {
  margin-left: 30px;
  margin-top: 0px;
  .adds {
    display: flex;
    margin-bottom: 10px;
  }
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.message {
  padding-left: 20px;
  width: 50%vh;
  height: 170px;
  margin-right: 20px;
  margin-left: 20px;
  margin-top: 10px;
  border: 1px solid gainsboro;
  border-radius: 1rem;
  span {
    font-size: 20px;
    margin-right: 120px;
  }
}
</style>
